<template>
  <div class="app-container">
    <button type="primary" @click="showToast">打开弹框</button>
  </div>
  <teleport to="body">
    <div v-if="visible" class="modal_class">
      A man who has not climbed the granted wall is not a true man
      <button style="width: 50%; margin-top: 20px" type="primary" @click="closeToast">
        关闭弹框
      </button>
    </div>
  </teleport>
<!--  <teleport to="body">-->
<!--    <div class="box" v-if="visible">-->
<!--      A man who has not climbed the granted wall is not a true man-->
<!--      <button @click="closeToast">关闭</button>-->
<!--    </div>-->
<!--  </teleport>-->
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
const showToast = () => {
  visible.value = true
}
const closeToast = () => {
  visible.value = false
}
</script>

<style lang="scss" scoped>
.modal_class {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 30px;
}
.box {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
}
</style>
